<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:decorate template="/templates/template.xhtml">

	<ui:define name="head">
		<style type="text/css">
.divCartao {
	margin: 20px 0 0 20px;
	width: 650px;
}

.nomeCartao {
	background-color: #CED4E0;
	font-size: 30px;
	font-weight: bold;
	display: inline-block;
	width: 220px;
	padding-left: 20px;
}

.valoresTabela,.labelsTabela {
	background-color: #E3EEF7;
}

.valoresTabela {
	text-align: right;
	width: 90px;
	font-weight: bold;
	padding-right: 15px;
}

.labelsTabela {
	width: 190px;
	padding-left: 10px;
}

.nomeCartaoFatura,.nomeMes,.mesAtual {
	background-color: #CED4E0;
}

.nomeMes,.mesAtual {
	text-align: center;
	width: 50px;
	border-left: 1px solid #fff;
}

.valoresFatura,.valoresTotaisFatura,.valoresFaturaAtuais,.valoresTotaisFaturaAtuais
	{
	background-color: #E8ECEF;
}

.valoresFaturaAtuais,.valoresTotaisFaturaAtuais,.valoresFatura,.valoresTotaisFatura
	{
	text-align: right;
	padding-right: 5px;
	border-left: 1px solid #fff;
}

.valoresFaturaAtuais,.valoresTotaisFaturaAtuais,.mesAtual {
	border-left: 1px solid #FF0000;
	border-right: 1px solid #FF0000;
}

.valoresTotaisFaturaAtuais {
	border-bottom: 1px solid #FF0000;
}

.mesAtual {
	border-top: 1px solid #FF0000;
}

.valoresTotaisFatura,.valoresTotaisFaturaAtuais {
	font-weight: bold;
}

.totalCartoes,.valoresTotaisFatura,.valoresTotaisFaturaAtuais {
	background-color: #B2B2B2;
}

.tabelaFatura {
	
}

.imageClass {
	background-image: url('../imgs/check.png');
	width: 16px;
	height: 16px;
}
</style>
	</ui:define>

	<ui:define name="centro">

		<h:form id="form1" prependId="false">
			<p:growl id="growl" showDetail="true" sticky="true" />

			<table cellpadding="0" cellspacing="0" class="tabelaFatura">

				<tr>
					<td align="center"><div style="width: 85px" /><h:outputText value="#{faturaMB.anoFaturas}" /></td>
					<ui:repeat var="mes" value="#{faturaMB.listaMeses}">

						<h:panelGroup rendered="#{not faturaMB.isMesAtual( mes)}">
							<td class="nomeMes">
								<div style="width: 65px">
									<h:outputText value="#{mes}">
										<f:convertDateTime pattern="MMMMM" />
									</h:outputText>
								</div>
							</td>
						</h:panelGroup>

						<h:panelGroup rendered="#{faturaMB.isMesAtual( mes)}">
							<td class="mesAtual">
								<div style="width: 65px">
									<h:outputText value="#{mes}">
										<f:convertDateTime pattern="MMMMM" />
									</h:outputText>
								</div>
							</td>
						</h:panelGroup>

					</ui:repeat>
				</tr>

				<ui:repeat var="cartao" value="#{faturaMB.listaContasCredito}">
					<tr>
						<td class="nomeCartaoFatura">#{cartao.nome}</td>
						<ui:repeat var="mes" value="#{faturaMB.listaMeses}">

							<h:panelGroup rendered="#{not faturaMB.isMesAtual( mes)}">
								<td class="valoresFatura"  valign="middle"><p:commandLink
										action="#{faturaMB.carregarParcelasPorFatura(cartao, mes)}"
										oncomplete="dlg2.show();" process="@this" update="@(#form2)">
										<h:outputText
											value="#{faturaMB.buscarFatura( cartao, mes).valorTotal}">
											<f:convertNumber type="currency" currencySymbol="" />
										</h:outputText>
									</p:commandLink></td>
							</h:panelGroup>

							<h:panelGroup rendered="#{faturaMB.isMesAtual( mes)}">
								<td class="valoresFaturaAtuais" valign="middle">
								
									<p:commandLink action="#{faturaMB.carregarModalFecharFatura(cartao, mes)}"
										rendered="#{not faturaMB.buscarFatura( cartao, mes).faturaFechada and faturaMB.buscarFatura( cartao, mes).valorTotal > 0}"
										 oncomplete="dlgFecha.show();" process="@this" update=":form3">
										<p:graphicImage url="/imgs/money2.png" />
									</p:commandLink>
									<p:commandLink
											action="#{faturaMB.carregarParcelasPorFatura(cartao, mes)}"
											oncomplete="dlg2.show();" process="@this" update="@(#form2)">
									<h:outputText
											value="#{faturaMB.buscarFatura( cartao, mes).valorTotal}">
											<f:convertNumber type="currency" currencySymbol="" />
									</h:outputText>
									</p:commandLink>
								</td>
							</h:panelGroup>


						</ui:repeat>

					</tr>
				</ui:repeat>
				<tr>
					<td class="totalCartoes">Total</td>
					<ui:repeat var="mes" value="#{faturaMB.listaMeses}" varStatus="i">

						<h:panelGroup rendered="#{not faturaMB.isMesAtual( mes)}">
							<td class="valoresTotaisFatura"><h:outputText
									value="#{faturaMB.buscarSomaTotalPorMes(mes)}">
									<f:convertNumber type="currency" currencySymbol="" />
								</h:outputText></td>
						</h:panelGroup>

						<h:panelGroup rendered="#{faturaMB.isMesAtual( mes)}">
							<td class="valoresTotaisFaturaAtuais"><h:outputText
									value="#{faturaMB.buscarSomaTotalPorMes(mes)}">
									<f:convertNumber type="currency" currencySymbol="" />
								</h:outputText></td>
						</h:panelGroup>
					</ui:repeat>
				</tr>
			</table>
			
			<p:commandLink action="#{faturaMB.doCarregarFaturas}" update="@form">
				<h:graphicImage url="/imgs/nav_left_blue.png" />
				<f:setPropertyActionListener target="#{faturaMB.anoFaturas}" value="#{faturaMB.anoFaturas - 1}" />
			</p:commandLink>
			
			<p:commandLink action="#{faturaMB.doCarregarFaturas}" update="@form">
				<h:graphicImage url="/imgs/nav_right_blue.png" />
				<f:setPropertyActionListener target="#{faturaMB.anoFaturas}" value="#{faturaMB.anoFaturas + 1}" />
			</p:commandLink>
			

			<p:spacer height="30" />

			<p:lineChart id="linear" value="#{faturaMB.graficoCartoesModel}"
				legendPosition="e" animate="true" title="Faturas dos cartões"
				minY="0" xaxisLabel="Mês" yaxisLabel="Valor"
				style="height:150px; width:880px;" />

			<p:spacer height="30" />

			<ui:repeat var="cartao" value="#{faturaMB.listaContasCredito}">

				<table cellpadding="0" cellspacing="0" border="0"
					style="margin-bottom: 10px;">

					<tr>
						<td rowspan="2" width="1"><h:outputText
								styleClass="nomeCartao" value="#{cartao.nome}" /></td>
						<td class="labelsTabela">Limite de crédito total:</td>
						<td class="valoresTabela">R$ <h:outputText
								value="#{cartao.limite}">
								<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
							</h:outputText>
						</td>
						<td class="labelsTabela">Dia do fechamento:</td>
						<td class="valoresTabela"><h:outputText
								value="#{cartao.diaFechamentoFatura}" /></td>
					</tr>

					<tr>
						<td class="labelsTabela">Limite de crédito disponível:</td>
						<td class="valoresTabela">R$ 7.800,00</td>
						<td class="labelsTabela">Dia do vencimento:</td>
						<td class="valoresTabela"><h:outputText
								value="#{cartao.diaVencimentoFatura}" /></td>
					</tr>

				</table>
			</ui:repeat>

		</h:form>

		<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2"
			appendToBody="true" modal="true" height="300" width="650">
			<h:form id="form2">
				<p:dataTable id="tblParcelasFaturas"
					value="#{faturaMB.listaParcelarPorFatura}" var="parcela"
					paginator="true" rows="10" paginatorPosition="bottom">
					<p:column width="50">
						<f:facet name="header">Data</f:facet>
						<h:outputText value="#{parcela.dataVencimento}">
							<f:convertDateTime type="date" />
						</h:outputText>
					</p:column>
					<p:column>
						<f:facet name="header">Descrição</f:facet>
						<h:outputText value="#{parcela.transacao.descricao}" />
					</p:column>
					<p:column width="50">
						<f:facet name="header">Valor (R$)</f:facet>
						<h:outputText value="#{parcela.valor}"
							rendered="#{not parcela.editando}">
							<f:convertNumber type="currency" currencySymbol="" />
						</h:outputText>

						<h:inputText value="#{parcela.valor}"
							rendered="#{parcela.editando}">
						</h:inputText>
					</p:column>

					<p:column>
						<p:commandLink process="@this tblParcelasFaturas" update="@(form)"
							action="#{faturaMB.alterarParcela(parcela)}"
							rendered="#{parcela.editando}" title="Salvar">
							<p:graphicImage url="../imgs/check.png" />
						</p:commandLink>
						
						<p:commandLink process="@this" update="@(#form2)"
						rendered="#{parcela.editando}"	title="Cancelar">
							<p:graphicImage url="../imgs/delete.png" />
							
							<f:setPropertyActionListener value="#{false}"
								target="#{parcela.editando}" />
						</p:commandLink>
						<p:spacer width="10" />
						<p:commandLink process="@this" update="@(#form2)"
						rendered="#{not parcela.editando}"	title="Editar">

							<p:graphicImage url="../imgs/edit.png" />

							<f:setPropertyActionListener value="#{true}"
								target="#{parcela.editando}" />
						</p:commandLink>
					</p:column>
				</p:dataTable>
			</h:form>
		</p:dialog>
		
		<p:dialog id="dialogFecha" header="Fechar fatura" widgetVar="dlgFecha"
			appendToBody="true" modal="true" height="150" width="250">
			<h:form id="form3">
				
				<table cellpadding="0" cellspacing="10" border="0">
					<tr>
						<td>Fechamento:</td>
						<td>
							<p:calendar id="calDtFecha" locale="pt"
									value="#{faturaMB.faturaFechamento.dataFechamento}"
									pattern="dd/MM/yyyy" size="10" showOn="button" navigator="true" />
							</td>
					</tr>
					<tr>
						<td>Vencimento:</td>
						<td>
							<p:calendar id="calDtVenc" locale="pt"
									value="#{faturaMB.faturaFechamento.dataVencimento}"
									pattern="dd/MM/yyyy" size="10" showOn="button" navigator="true" />
						</td>
					</tr>
					
					<tr>
						<td><h:outputLabel for="cboContaPesquisa" value="Conta" />:</td>
						<td>
							<h:selectOneMenu id="cboContaPesquisa" 
								value="#{faturaMB.faturaFechamento.contaPagamento}"
								converter="selectOneConverter" styleClass="cboContaPesquisa"
								itens="#{faturaMB.listaContasPagamentoFatura}">
								<f:selectItems value="#{faturaMB.listaContasPagamentoFatura}"
									var="conta" itemLabel="#{conta.nome}" itemValue="#{conta}" />
							</h:selectOneMenu>
						</td>
					</tr>
					
					<tr>
						<td colspan="2" align="center">
							<p:commandButton value="Fechar Fatura" 
								action="#{faturaMB.fecharFatura}" 
								process="form3" update=":form1"
								oncomplete="dlgFecha.hide();"/>
						</td>
					</tr>
				</table>
				
			</h:form>
		</p:dialog>

	</ui:define>
</ui:decorate>
</html>